aliases:
description: Learn how to change parts of the Obsidian app’s appearance without creating a full theme.
mobile: true
permalink: snippets
publish: true
Learn how to modify aspects of the Obsidian application's appearance without needing to build a theme.
CSS is a language that controls how HTML looks. By adding CSS snippets, you can change parts of the Obsidian user interface, like the size and color of headings. Obsidian has CSS variables that help you customise the interface easily.
Obsidian looks for CSS snippets inside the vault's configuration folder.
To add a CSS snippet on Desktop , follow these steps:
To add a CSS snippet on Mobile/Tablet , you can follow these steps:
snippets
if it doesn’t exist.Alternately, you can
Once enabled, Obsidian will automatically detect changes to CSS snippets and apply them when you save the file.
Obsidian offers several methods that make writing CSS easier and more powerful.
It has a host of CSS variables to easily modify parts of Obsidian and a built-in property type to change the appearance of one or several notes.
Create a file called headers.css
with the following content to change the colors of the six heading levels to a rainbow:
body {
--h1-color: red;
--h2-color: orange;
--h3-color: yellow;
--h4-color: green;
--h5-color: blue;
--h6-color: pink;
}
With a property name cssclasses
with any value to make one or more notes look different from others.
CSS:
.no-inline .inline-title {
display: none;
}
YAML/Properties:
cssclasses: no-inline
This hides the inline title from any note with this property and value.
To ensure that the CSS file is valid and formatted correctly, we advise creating and editing it with a program like Visual Studio Code or Sublime Text, as invalid CSS will not work.